<!--一根水平的可拖拽的分隔线，用于用户拖拽调整分割线上面的区域高度-->
<template>
  <div class="divider-line" @mousedown="(e)=>onMousedown(e)">
    <a-divider
      style="height:2px;"
      :dashed="dashed"
      :type="type"
    ></a-divider>
  </div>
</template>

<script>
export default {
  name: 'AntMoveDivider',
  props: {
    /**
     * 上层组件this作用域 - 配合domRef使用（优先级大于autoPrevDom，用于弹出框获取dom）
     * 父组件提供示例：
     *   computed:{
     *     // 获取当前作用域
     *     getTableThis(){
     *       return this
     *     }
     *   },
     */
    domThis: {
      type: Object,
      default: null
    },
    /**
     * 受影响的dom名称ref - 配合domThis使用（优先级大于autoPrevDom，用于弹出框获取dom）
     */
    domRef: {
      type: String,
      default: null
    },
    /**
     * 受影响的dom-需要调整高度的dom，如果domThis和domRef，则不用传入
     */
    autoPrevDom: {
      type: HTMLDivElement,
      default: null
    },
    /**
     * 线条是否为虚线
     */
    dashed: {
      type: Boolean,
      default: false
    },
    /**
     * 分割线类型水平/垂直，horizontal vertical
     */
    type: {
      type: String,
      default: 'horizontal'
    }
  },
  methods: {
    /**
     * 按下鼠标事件
     * @param e
     */
    onMousedown(e) {
      e.preventDefault()
      let autoPrevDom = this.autoPrevDom
      if (this.domThis && this.domRef) {
        autoPrevDom = this.domThis.$refs[this.domRef]
      }
      if (!autoPrevDom) {
        this.$message.warning('请传入受影响的DOM')
        return
      }
      const _this = this
      const currentMouseY = e.clientY
      const prevDomHeight = autoPrevDom.offsetHeight
      //鼠标拖动时，告诉父组件，此时分隔线上面区域的高度height，父组件可自己调整上区域的div高度
      document.onmousemove = function(e1) {
        _this.$emit('mouseMoveY', { height: prevDomHeight + e1.clientY - currentMouseY, changeDistance: e1.clientY - currentMouseY })
      }
      //鼠标松开
      document.onmouseup = function(e2) {
          document.onmousemove = null
          document.onmouseup = null
        }
    }
  }
}
</script>

<style lang="less" scoped>
.divider-line{
  height: 2px;
  margin: 5px 0;
  cursor: n-resize;
}
</style>
